<template>
 <div style="width: 100vw;height: 100vh;position: relative;">
    <div v-if="loginedTeacherInfo==undefined" style="width: 100%;height: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;background-image: url(https://api.dujin.org/bing/1920.php);">
        <div style="width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);padding-left: 50vw;padding-top: 50vh;position: relative;backdrop-filter: blur(20px);">
            <div style="position: fixed;width: 100vw;bottom: 15px;text-align: center;color: white;left: 0;font-size: 20px;">
                志愿助手
            </div>
            <div v-if="!isLogining" style="transform: translate(-50%,-50%);text-align: center;">
                <p style="font-size: 24px;font-weight: bold;color: white;margin-bottom: 30px;">咨询师登录</p>
                <div style="margin-bottom: 10px;">
                    <div style="padding: 2px 2px;background-color: rgba(255,255,255,0.2);border-radius: 5px;width: 300px;display: inline-block;border-bottom: 2px solid rgb(0,120,215);padding-bottom: 0;backdrop-filter: blur(20px);">
                        <a-input @press-enter="loginTeacher" v-model="account" style="border-radius: 5px;border: 0;color: white;background-color: rgba(0,0,0,0.6);padding: 0 10px;height: 35px;" allow-clear placeholder="账号"></a-input>
                    </div>
                </div>
                <div style="margin-bottom: 20px;">
                    <div style="padding: 2px 2px;background-color: rgba(255,255,255,0.2);border-radius: 5px;width: 300px;display: inline-block;border-bottom: 2px solid rgb(0,120,215);padding-bottom: 0;backdrop-filter: blur(20px);">
                        <a-input @press-enter="loginTeacher" v-model="password" style="border-radius: 5px;border: 0;color: white;background-color: rgba(0,0,0,0.6);padding: 0 10px;height: 35px;" allow-clear placeholder="密码" type="password"></a-input>
                    </div>
                </div>
                <div style="text-align: center;">
                    <div class="button" style="color: white;" @click="loginTeacher">
                        登录
                    </div>
                </div>
            </div>
            <div v-if="isLogining" style="display: inline-block;transform: translate(-50%,-50%);color: white;font-size: 26px;">
                正在登录
            </div>
        </div>
    </div>
    <div v-if="loginedTeacherInfo!=undefined" style="width: 100%;height: 100%;position: relative;">
        <div style="width: 100%;height: 55px;border-bottom: 1px solid rgb(230,230,230);text-align: center;">
            <div style="width: 1200px;display: inline-block;height: 55px;line-height: 55px;font-size: 18px;text-align: left;">
                志愿助手
            </div>
        </div>
        <div style="width: 1200px;height: calc(100% - 55px);margin: 0 auto;position: relative;padding: 20px 20px;">
            <div style="width: 100%;height: 100%;border-radius: 5px;border: 2px solid rgb(230,230,230);position: relative;">
                <div style="width: 300px;display: inline-block;height: 100%;border-right: 2px solid rgb(230,230,230);position: relative;">
                    <div style="width: 100%;">
                        <div style="width: 100%;border-bottom: 2px solid rgb(230,230,230);line-height: 30px;padding: 20px 20px;">
                            <p>姓名：{{ loginedTeacherInfo.name }}</p>
                            <p>身份证号：{{ loginedTeacherInfo.idNumber }}</p>
                        </div>
                    </div>
                    <div style="width: 100%;height: calc(100% - 102px);overflow-y: scroll;position: relative;padding: 10px 10px;padding-right: 5px;">
                        <div v-if="students.length==0" style="width: 100%;height: 100%;line-height: 100%;text-align: center;font-size: 20px;color: gray;">
                            没有学生
                        </div>
                        <div v-bind:key="item" v-for="item in students" class="student-item" @click="()=>{
                            selectedStudentInfo=item;
                            selectedStudentStatus=-1;
                            getList(true);
                        }" :class="selectedStudentInfo==item?['student-item-selected']:['']">
                            <p style="font-size: 16px;">{{ item.name }}</p>
                            <div v-if="item.unreadNum!=0" style="padding: 3px 6px;background-color: red;color: white;border-radius: 10px;position: absolute;right: 15px;font-size: 12px;top: calc((48.4px - 19.79px) / 2);">
                                {{ item.unreadNum }}
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="selectedStudentInfo!=undefined" style="display: inline-block;height: 100%;width: calc(100% - 300px);position: relative;float: right;">
                    <div style="padding: 20px 20px;border-bottom: 2px solid rgb(230,230,230);font-size: 20px;">
                        {{ selectedStudentInfo.name }}
                        <span v-if="selectedStudentStatus==true" style="padding: 2px 3px;border-radius: 3px;background-color: green;color:white;font-size: 12px;">在线</span>
                        <span v-if="!selectedStudentStatus" style="padding: 2px 3px;border-radius: 3px;background-color: gray;color:white;font-size: 12px;">离线</span>
                        <userInfoSection style="font-size: 14px;margin-top: 10px;" :user-info="selectedStudentInfo"></userInfoSection>
                    </div>
                    <div id="chatwindow" style="width: 100%;height: calc(100% - 150.76px - 65px - 55px);overflow-y: scroll;padding: 20px 20px;">
                        <div v-bind:key="item" v-for="item in selectedStudentList" style="width: 100%;margin-bottom: 10px;">
            <div style="text-align: center;">
              <div style="display: inline-block;padding: 5px 5px;background-color: lightgray;color: white;border-radius: 5px;">
                {{ parseDateTime(item.time) }}
              </div>
            </div>
            <chatItem :data="subitem" :my-account="loginedTeacherInfo.account" v-bind:key="subitem" v-for="subitem in item.items"></chatItem>
          </div>
                    </div>
                    <div style="width: 100%;padding: 12px 8px;border-top: 2px solid rgb(230,230,230);">
                        <a-textarea v-model="chatInput" style="background-color: white;border: 0;padding: 0 0;" allow-clear :auto-size="{
    minRows:3,
    maxRows:3
  }"/>
                        <div style="text-align: right;padding: 8px 12px;position: relative;">
                            <a-trigger trigger="click" :unmount-on-close="false">
      <a-button style="padding: 0 6px;color: dimgray;position: absolute;left: 8px;top: 12px;">
        <svg width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M34 12a2 2 0 012 2v28a2 2 0 01-2 2H6a2 2 0 01-2-2V14a2 2 0 012-2h28zm-2 4H8v24h24V16zm-4.119 10.366a.8.8 0 01.235.565V35.4a.6.6 0 01-.6.6H23.51l.012.011H12.689a.6.6 0 01-.424-1.024l4.442-4.443a.8.8 0 011.12-.01l2.423 2.331 6.5-6.5a.8.8 0 011.131 0zM42 4a2 2 0 012 2v25a1 1 0 01-1 1h-2a1 1 0 01-1-1V8H17a1 1 0 01-1-1V5a1 1 0 011-1h25zM18 20v6h-6v-6h6z" fill="currentColor"/></svg><span style="margin-left: 5px;">发送图片</span>
      </a-button>
      <template #content>
        <div style="width: 300px;padding: 20px 20px;border-radius: 5px;border: 1px solid rgb(230,230,230);background-color: white;">
          请输入图片地址
          <a-input @press-enter="sendPicture" v-model="pictureUrl" allow-clear style="border: 0px;border-bottom: 1px solid rgb(0,120,215);background-color: white;padding: 0 0;margin-top: 5px;margin-bottom: 5px;" placeholder="图片地址"></a-input>
          <div style="text-align: right;">
            <a-button type="primary" :loading="isSending" @click="sendPicture" :disabled="pictureUrl==''">发送</a-button>
          </div>
        </div>
      </template>
              </a-trigger>
                            <a-button type="primary" :loading="isSending" @click="sendMessage" :disabled="chatInput==''">发送</a-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>
</template>

<script>
import axios from 'axios';
import sha256 from 'sha256';
import chatItem from '@/components/chatItem.vue';
import userInfoSection from '@/components/userInfoSection.vue';

export default{
    components:{
        chatItem,userInfoSection
    },
  data(){
    return{
      account:'',
      password:'',
      isLogining:false,
      loginedTeacherInfo:undefined,
      students:[],
      selectedStudentInfo:undefined,
      selectedStudentList:undefined,
      selectedStudentStatus:-1,
      chatInput:'',
      isSending:false,
      pictureUrl:'',
    }
  },
  mounted(){

  },
  methods:{
    updateStatus(){
      var config = {
   method: 'post',
   url: '/api/v1/users/updateStatus?data=' + JSON.stringify({
    account:this.loginedTeacherInfo.account
   }),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then(() => {
  //  
})
    },
    sendPicture(){
        if(this.pictureUrl==''){
            return;
        }
        this.isSending=true;
      var config = {
   method: 'post',
   url: '/api/v1/teacher/send?data=' + JSON.stringify({
    fromAccount:this.loginedTeacherInfo.account,
    toAccount:this.selectedStudentInfo.account,
    type:2,
    content:this.pictureUrl,
    time:this.formatDateTime(),
   }),
   headers: { 
      'Accept': '*/*',
   }
};

axios(config)
.then( (res) => {
  this.isSending=false;
   if(res.data.status==1){
    this.pictureUrl='';
    this.getList(true);
   }else{
    this.$message.error({
      content:res.data.content
    })
   }
})
    },
    sendMessage(){
        if (this.chatInput=='') {
            return;
        }
        
        this.isSending=true;
      var config = {
   method: 'post',
   url: '/api/v1/teacher/send?data=' + JSON.stringify({
    fromAccount:this.loginedTeacherInfo.account,
    toAccount:this.selectedStudentInfo.account,
    type:1,
    content:this.chatInput,
    time:this.formatDateTime(),
   }),
   headers: { 
      'Accept': '*/*',
   }
};

axios(config)
.then( (res) => {
  this.isSending=false;
   if(res.data.status==1){
    this.chatInput='';
    this.getList(true);
   }else{
    this.$message.error({
      content:res.data.content
    })
   }
})
    },
    changeChatWindowToBottom(){
      setTimeout(()=>{
        document.getElementById("chatwindow").scrollTop=1000000;
      },1);
    },
    parseDateTime(dateTimeStr) {
      const year = '20' + dateTimeStr.slice(0, 2);
  const month = dateTimeStr.slice(2, 4);
  const day = dateTimeStr.slice(4, 6);
  const hour = dateTimeStr.slice(6, 8);
  const minute = dateTimeStr.slice(8, 10);

  // 构造日期对象
  const date = new Date(year, month - 1, day, hour, minute);

  // 格式化日期和时间
  const formattedDate = `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`;
  const formattedTime = `${date.getHours()}:${date.getMinutes()}`;

  // 返回格式化后的日期和时间
  return `${formattedDate} ${formattedTime}`;
    },
    getList(isFirst){
        if(this.selectedStudentInfo==undefined){
            return;
        }
        var config = {
   method: 'get',
   url: '/api/v1/teacher/getList?data=' + JSON.stringify({
    account1:this.loginedTeacherInfo.account,
    account2:this.selectedStudentInfo.account
   }),
   headers: { 
      'Accept': '*/*'
   }
};

axios(config)
.then((res) => {
   if(res.data.status==1){
    this.selectedStudentList=res.data.results;
    this.selectedStudentStatus=res.data.loginStatus;
    if(isFirst){
        this.changeChatWindowToBottom();
    }
   }else{
    this.$message.error({
        content:res.data.content
    })
   }
})
    },
    getStudentList(){
        var config = {
   method: 'get',
   url: '/api/v1/teacher/getChatList?data=' + JSON.stringify({
    account:this.loginedTeacherInfo.account
   }),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res)=> {
   if(res.data.status==1){
    let pre = [];
    for(let i=0;i<res.data.results.length;i++){
        if(res.data.results[i].name=='' || res.data.results[i].isVip==0){
            continue;
        }
        pre.push(res.data.results[i])
    }
    this.students=pre;
   }else{
    this.$message.error({
        content:res.data.content
    })
   }
})
    },
    loginTeacher(){
        this.isLogining=true;
        var config = {
   method: 'post',
   url: '/api/v1/users/teacherLogin?data=' + JSON.stringify({
    account:this.account,
    password:sha256(this.password)
   }),
   headers: { 
      'Accept': '*/*'
   }
};

axios(config)
.then((res) => {
    this.isLogining=false;
   if(res.data.status==1){
    this.loginedTeacherInfo=res.data.results
    this.getStudentList();
    setInterval(() => {
        this.getList();
    }, 1000);
    setInterval(() => {
        this.updateStatus();
    }, 3000);
   }else{
    this.$message.error({
        content:res.data.content
    })
   }
})
    },
    formatDateTime() {
  const now = new Date();
  
  const year = now.getFullYear().toString().slice(2);
  let month = (now.getMonth() + 1).toString();
  let day = now.getDate().toString();
  let hour = now.getHours().toString();
  let minute = now.getMinutes().toString();

  // 格式化月份、日期、时、分为两位数形式
  if (month.length === 1) {
    month = '0' + month;
  }
  if (day.length === 1) {
    day = '0' + day;
  }
  if (hour.length === 1) {
    hour = '0' + hour;
  }
  if (minute.length === 1) {
    minute = '0' + minute;
  }

  const formattedDateTime = year + month + day + hour + minute;
  return formattedDateTime;
    },
  },
  props:{

  },
}
</script>

<style scoped>

.student-item-selected{
    background-color: rgb(242,242,242);
}

.student-item:active{
    scale: 0.99;
}

.student-item:hover{
    background-color: rgb(230,230,230);
}

.student-item{
    padding: 15px 15px;
    transition: all .1s;
    border-radius: 5px;
    position: relative;
}

.button{
    border-radius: 5px;
    background-color: rgba(255,255,255,0.2);
    transition: all .1s;
    display: inline-block;
    padding: 10px 35px;
    backdrop-filter: blur(20px);
}

.button:hover{
    background-color: rgba(255,255,255,0.3);
}

.button:active{
    scale: 0.99;
}

</style>